let drag_area = document.querySelector('.drag_area')
let img_list = document.querySelector('.img_list')

drag_area.addEventListener('dragover', dragOver)
drag_area.addEventListener('dragenter', dragEnter)
drag_area.addEventListener('dragleave', dragLeave)
drag_area.addEventListener('drop', dragDrop, false)


function dragOver(e) {
  e.preventDefault() // 这里阻止默认行为  才可能触发 拖拽放下事件
}


function dragEnter(e) {
  this.classList.add('enter')
}


function dragLeave(e) {
  this.classList.remove('enter')
}

function dragDrop(e) {
  e.preventDefault()//阻止默认行为  --打开文件
  e.stopPropagation()//阻止冒泡

  if (Object.keys(e.dataTransfer.files).every(key => e.dataTransfer.files[key].type.startsWith('image'))) {
    Object.keys(e.dataTransfer.files).forEach(key => {
      console.log(URL.createObjectURL(e.dataTransfer.files[key]));
      img_list.appendChild(createImgItem(URL.createObjectURL(e.dataTransfer.files[key])))
    })
  } else {
    alert("请选择图片进行拖拽上传!")
  }

  this.classList.remove('enter')

}

function createImgItem(src) {
  let div = document.createElement('div')
  div.classList.add('img_item')
  let img = document.createElement('img')
  img.src = src
  // 加载完成后 释放 这个临时路径
  img.onload = function(e){
    URL.revokeObjectURL(this.src)
  }
  img.draggable = false
  div.appendChild(img)
  return div
}

